<template>
<h1>个人简历练习</h1>

  <table border="1">
    <tr>
      <td>照片：</td>
      <td><img :src="person.imgUrl" width="100px"></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td><ul>
        <li v-for="item in person.friends">{{item}}</li>
      </ul></td>
    </tr>
  </table>
  <button @click="loadData">点击加载数据</button>
</template>

<script setup>

import {ref} from "vue";
//准备一个空对象，用于绑定
const person =ref({name:'',age:'',imgUrl:'',friends:[]});
//准备一个加载数据的方法
const loadData = () => {
 person.value={
   name:'范传奇',
   age:18,
   imgUrl: 'fcq.jpg',
   friends: ['小明','小红','小刚','赵六','钱七']
 }
}
</script>

<style scoped>

</style>